<!--
//
// GFilePreview.vue
// hs-admin
//
// Created by 区区电脑 on 2023/04/23.
//
-->
<template>
    <div v-if="src" class="GFilePreview" @click.stop>
        <div v-if="exten === '.jpg' || exten === '.png' || exten === '.jpeg'" class="file">
            <!--<img :src="fullPath" class="pic-src"/>-->
            <b-icon name="bi bi-file-image" size="16"/>
            <el-button class="button" size="small" type="primary" link @click="preview"><div class="name">{{ name || '查看' }}</div></el-button>
        </div>
        <div v-else-if="exten === '.mp4'" class="file">
            <b-icon name="bi-file-earmark-play" size="16"/>
            <el-button class="button" size="small" type="primary" link @click="preview"><div class="name">{{ name || '查看' }}</div></el-button>
        </div>
        <div v-else-if="exten === '.pdf'" class="file">
            <el-button class="button" size="small" type="primary" link @click="previewPDF"><div class="name">{{ name || '查看' }}</div></el-button>
        </div>
        <div v-else-if="exten === '.doc' || exten === '.docx'" class="file">
            <el-button class="button" size="small" type="primary" link @click="preview"><div class="name">{{ name || '查看' }}</div></el-button>
        </div>
        <div v-else class="file">
            <el-button class="button" size="small" type="primary" link @click="preview"><div class="name">{{ name || '查看' }}</div></el-button>
        </div>
    </div>
    <teleport to="body">
        <showPdf ref="showPdf"/>
    </teleport>
</template>

<script>
import showPdf from "./showPdf.vue"
export default {
    name: "GFilePreview",
    components: {showPdf},
    props: {
        name: {
            type: String,
            default: () => ""
        },
        src: {
            type: String,
            default: () => ""
        }
    },
    computed: {
        exten() {
            const exten = (this.src || "").split(".").at(-1);
            return `.${exten}`.toLowerCase();
        },
        fullPath() {
            if (!this.src) return ""
            if (this.src.indexOf("http") > -1) return this.src
            return `${window.$config.baseUrl}/${this.src}`
        }
    },
    methods: {
        preview() {
            const width = 500;
            const height = 600;
            const left = (document.documentElement.clientWidth - width) / 2;
            window.open(this.fullPath, "", `width=${width}, height=${height}, left=${height}, top=160`)
        },
        previewPDF() {
            this.$refs.showPdf.show({
                title: this.name,
                options: {fullPath: this.fullPath},
                ok: () => {}
            })
        }
    }
}
</script>

<style scoped lang="scss">
.GFilePreview {
    display: inline-flex;
    .file {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        color: var(--el-color-primary);
        .pic-src {
            border-radius: 4px;
            width: 60px;
            height: 60px;
        }
        .button {
            margin-left: 4px;
            .name {
                max-width: 300px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
}
</style>
